<template>
  <view style="padding: 30rpx;">
    <view style="margin-bottom: 30rpx;">
      <view class="titles">请选择类型</view>
      <u-radio-group v-model="value" @change="radioGroupChange" wrap>
        <u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled"
          style="margin-bottom: 40rpx;">
          {{item.name}}
        </u-radio>
      </u-radio-group>
    </view>
    <view style="margin-bottom: 30rpx;">
      <view class="titles">相关描述</view>
      <view class="textarea">
        <textarea v-model="remark" placeholder="客官~您对我们的服务还满意吗，请给予我们你的意见我们将做的更好~" />
        <view style="width: 100%;margin-top: 30rpx;" class="u-f">
          <scroll-view scroll-x style="white-space: nowrap;">
            <view class="upload_img img_box relative" @click="uploadAuthImg">
              <u-icon name="camera" size="50" color="#ccc" style="left: 26rpx;top: 26rpx;" class="absolute"></u-icon>
              <!-- <image src="/static/images/huangjin/upload.png" mode=""></image> -->
            </view>
            <view v-if="imgList.length" class="u-f" style="display: inline-block;">
              <view class="img_box" v-for="(item, index) in imgList" :key="index">
                <image :src="item" />
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <view style="margin-bottom: 30rpx;">
      <view class="titles">联系方式</view>
      <view class="textarea">
        <u-input v-model="mobile" maxlength="11" placeholder="请输入您的联系电话"></u-input>
      </view>
    </view>
    <view style="margin-bottom: 30rpx;" class="u-f-ac u-f-jsb">
       <u-button type="success" shape="circle" class="custom-style">提交</u-button>
       <!-- <u-button type="success" shape="circle" class="custom-style custom-style2" @click="$qqyUtils.phoneNumber('13612805535')">联系客服</u-button> -->
    </view>
  </view>
</template>

<script>
  import {
    api
  } from '@/config/config.js'
  export default {
    data() {
      return {
        remark: '',
        mobile: '',
        imgList: [],
        list: [{
            name: '产品功能问题反馈',
            disabled: false
          },
          {
            name: '建议及意见反馈',
            disabled: false
          },
          {
            name: '投诉客服其他问题',
            disabled: false
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        value: '',
      }
    },
    onLoad() {

    },
    methods: {
      radioGroupChange(e) {
        console.log(e)
      },
      uploadAuthImg() {
        let that = this
        uni.chooseImage({
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
            // const filePath = res.tempFilePaths[0]
            for (var i = 0; i < res.tempFilePaths.length; i++) {
              uni.uploadFile({
                url: `${api.base}/uploaders`,
                filePath: res.tempFilePaths[i],
                name: 'file',
                success: (uploadFileRes) => {
                  const data = typeof uploadFileRes.data === 'string' ? JSON.parse(uploadFileRes.data) :
                    uploadFileRes.data
                  console.log(data)
                  this.imgList.push(data.url)
                }
              });
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #FFFFFF;
  }

  .titles {
    font-weight: 700;
    margin-bottom: 50rpx;
  }

  .textarea {
    background-color: #FAF9FC;
    padding: 30rpx;
  }

  .upload_img {
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 110rpx;
  }

  .img_box {
    margin-right: 30rpx;
    width: 110rpx;
    height: 110rpx;
    display: inline-block;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .custom-style {
    width: 100% !important;
    padding: 0 120rpx !important;
    background-color: #fd5f09 !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
  }
  .custom-style2 {
    background-color: #fd5f09 !important;
  }
</style>
